<template>
  <header class="header-warp">
    <div class="logo"></div>
    <div class="user-logout" @click="logout()">
      <span class="iconfont icon-logout"></span>
      退出
    </div>
    <div class="user-info">
      <img class="user-head" src="../assets/img/user_head.png" alt="">
      <el-dropdown trigger="click">
        <span class="el-dropdown-link">
          <span class="user-name" v-if="realName">{{realName}}</span>
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="dialogChangePassword">修改密码</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <div class="product">
      <span>产品：</span>
      <el-select v-model="appId" placeholder="请选择" @change="appIdChange">
          <el-option
            v-for="item in appIdoptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
    </div>
  </header>
</template>

<script>

  export default {
    props: ['login_user'],
    data() {
      return {
        realName: null,
        dialogChangePassword: false,
        formChangePassword: {
          newPassword: ''
        },
        rulesChangePassword: {
          newPassword: [
            {required: true, message: '请输入新密码', trigger: 'blur'},
          ]
        },
        appIdoptions:[],
        appId: null,
      }
    },
    methods: {
      modifyPassword() {
        let that = this;
        that.$refs['formChangePassword'].validate((valid) => {
            if (valid) {
              that.ajax({
                api: '/admin/user/modifyPassword',
                data: that.formChangePassword,
                success: function (data) {
                  if (data.code == '0') {
                    that.showMsg('修改成功，请重新登录', 'success')
                    that.dialogChangePassword = false;
                    that.logout();
                  }
                }
              })
            }
          }
        )
      },
      open(method) {
        let that = this;
        that[method] = true;
      },
      appIdChange(row){
        let that = this;
        let storeappId = that.$store.state.id;
        if(row == storeappId){
          console.log("return")
          return
        }else{
          that.$store.dispatch('appIdChange',row)
          that.appId = that.$store.state.id
        }

      }
    },
    watch: {
      dialogChangePassword(curr, old) {
        let that = this;
        if (curr == false) {
          that.$refs['formChangePassword'].resetFields();
        }
      }
    },
    created() {
      let that = this;
      that.login_user.supportAppArray.forEach(function(item,index){
        that.appIdoptions.push({
          value: item.appId,
          label: item.appName
        })
      })

      that.appId = that.$store.state.id
      that.realName = that.login_user.realName;
    }
  }
</script>

<style lang="less">
  .header-warp {
    height: 100%;
    font-size: 22px;
    padding: 0 20px;
    background: #fff;
    .logo {
      float: left;
      width: 180px;
      height: 60px;
      margin-top: 10px;
      background: url("../assets/img/home_logo.png") no-repeat center center;
      background-size:180px 60px;
    }
    .user-info {
      float: right;
      font-size: 0px;
      margin-right: 40px;
      margin-top: 20px;
      .user-name {
        font-size: 18px;
        color: #000;
      }
      .user-head {
        position: relative;
        top: 8px;
        background-color: #fff;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        margin-right: 10px;
      }
    }
    .user-logout {
      float: right;
      font-size: 18px;
      cursor: pointer;
      margin-top: 28px;
      .icon-logout {
        font-size: 24px;
        margin-right: 0px;
      }
    }
    .el-dropdown-menu__item {
      text-align: center;
    }
    .product{
      padding: 20px 0;
     margin-right: 30px;
     float:right;
     display:flex;
     span{
      width:60px;
      font-size:16px;
      line-height: 40px;
     }
     el-select{
      width:120px;
     }
    }
  }
</style>
